<template>
  <div>
    <div @click="back">
      <van-nav-bar left-text="返回" left-arrow title="垃圾分类" />
    </div>
    <div v-for="item in list" :key="item.id">
      <div class="p_lit">
        垃圾类型 :
        <span class="span_A">{{item.keyword}}</span>
        <div class="span_l" @click="lsiK">
          点击查看分类详情
          <div class="arrow_down" @click="xiangxia(item.id)"></div>
        </div>
      </div>
    </div>
    <div v-if="flag" class="fasgo">
      <div v-for="item in listA" :key="item.id">
       <div class="mtp">
         <van-cell is-link @click="showPopup" ><span>{{item.name}}</span></van-cell>
        <van-popup v-model="show">
          <img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt />
        </van-popup>
       </div>
        <van-popup v-model="show" position="top" :style="{ height: '1%' }" />
      </div>
    </div>
  </div>
</template>

<script>
import { fenlei, fenleixq } from '@/service/taxonomic'
import mixin from '@/mixin/flag'
export default {
  mixins: [mixin],
  data() {
    return {
      list: [],
      listA: [],
      flag: true,
      show: false,
    }
  },

  async mounted() {
    const b = await fenlei()
    this.list = b.data.data.splice(1, 20)
  },
  methods: {
    lsiK() {
      // this.flag = false
      this.listA = []
    },
    back() {
      this.$router.push('/CategOrized')
    },
    async xiangxia(id) {
      const a = await fenleixq(id)
      this.listA = a.data.rows.splice(1, 5)
      console.log(this.listA)
    },
    showPopup() {
      this.show = true
    },
  },
}
</script>

<style lang="scss" scoped>
.fasgo {
  width: 100%;
  position: fixed;
  top: 40px;
  left: 0;
  height: 50px;
  background-color: transparent;
 
  img {
    float: left;
    width: 400px;
    height: 400px;
    border-radius: 50%;
  }
  p {
    font-size: 12px;
  }
}
.p_lit {
  margin: 20px 0;
  width: 100%;
  height: 40px;
  font-size: 16px;
  .span_l {
    margin-top: 5px;
    font-size: 12px;
    color: brown;
    margin-bottom: 90px;
  }
  .span_A {
    color: red;
  }
}
.arrow_down {
  margin-right: 2px;
  margin-left: 10px;
  margin-top: 3px;
  float: left;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #008fd4;
}
.arrow_down:hover {
  -ms-transform: rotate(180deg); /* IE 9 */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
  -o-transform: rotate(180deg); /* Opera */
  transform: rotate(180deg);

  -webkit-transition: -webkit-transform 0.2s ease-in; /* Safari 和 Chrome */
  -moz-transition: -moz-transform 0.2s ease-in; /* Firefox */
  -o-transition: -o-transform 0.2s ease-in; /* Opera */
  transition: transform 0.2s ease-in;
}
</style>